<template>
  <div>
    <el-row>
      <el-col :span="6">
        <data-set title="总设备数" url="/api/device/count/all" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="运行设备数" url="/api/device/count/runtimeStatus?runtimeStatus=0" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="关闭设备数" url="/api/device/count/runtimeStatus?runtimeStatus=1" :interval=0></data-set>
      </el-col>
      <el-col :span="6">
        <data-set title="故障设备数" url="/api/device/count/runtimeStatus?runtimeStatus=2" :interval=0></data-set>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span=12 style="margin-top: 10px; padding: 10px">
        <el-row>
          <div style="border-left: 5px solid #409EFF; padding-left: 10px">
            设备类型
          </div>
        </el-row>
        <div id="pie">

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DataSet from "../../components/DataSet";
import {Pie} from "@antv/g2plot";
import {countDeviceGroupByDeviceType} from "@/api/device";

export default {
  name: "DeviceGeneral",
  components: {DataSet},
  created() {
    this.$nextTick(function () {
      this.a()
    })
  },
  methods: {
    a() {
      let data = [];
      const piePlot = new Pie('pie', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'name',
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: 'inner',
          offset: '-50%',
          content: '{value}',
          style: {
            textAlign: 'center',
            fontSize: 14,
          },
          autoRotate: false,
          statistic: {
            title: false,
            content: false,
          }
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      });

      countDeviceGroupByDeviceType().then((response) => {
        piePlot.changeData(response.data.data)
      })

      piePlot.render();

    }
  }
}
</script>

<style scoped>

</style>